<template>


  <div class="app">

    <div class="Address">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="出发点" label-width="60px">
          <el-cascader v-model="start" :options="options" clearable @change="handleChange" />
        </el-form-item>
        <el-form-item label="到达点" label-width="60px">
          <el-cascader v-model="destination" :options="options1" clearable @change="handleChange" />
        </el-form-item>
        <el-form-item label="时间" label-width="60px">
          <el-date-picker v-model="time" type="datetime" placeholder="选择时间" format="YYYY/MM/DD HH:mm:ss"
            value-format="x" :disabled-date="disabledDateFn" :disabled-time="defaultTime" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>


    </div>

    <div class="Table">





      <el-table ref="singleTableRef" :data="tableData" highlight-current-row
        style="width: 100%;height: 100%;background-color:rgb(255, 255,255,0.5);" @current-change="handleCurrentChange">


        <el-table-column type="index" width="50" />
        <el-table-column v-if="false" property="uuid" width="450" label="UUID" />
        <el-table-column property="username" label="发布者" width="120" />
        <!-- <el-table-column property="start" label="出发点地" width="120" />
        <el-table-column property="destination" label="目的地" width="120" /> -->
        <el-table-column property="licensePlate" label="车牌号" align="center" width="120" />
        <el-table-column property="people" label="最大人数" align="center" width="80" />
        <el-table-column property="people2" label="已有人数" align="center" width="80" />
        <el-table-column property="money" label="总金额(预估)" align="center" width="100" />
        <el-table-column property="place" label="详细地点" />
        <el-table-column property="time1" label="时间" align="center" />

      </el-table>



    </div>
    <div class="Button">

      <el-button type="primary" @click="setCurrent">加入打车</el-button>



    </div>
  </div>

</template>

<style scoped>
.app {
  width: 1000px;
  height: 680px;

  padding: 20px 50px;

  /* background-color:aquamarine; */
  overflow: hidden;
}

.Address {
  width: 800px;
  height: 70px;
  padding: 30px;
  /* background-color:rgb(0, 255, 170); */
}

.Table {
  width: 1000px;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
}

.Button {
  width: 900px;
  padding: 20px 50px;
  height: 60px;
  /* background-color: red; */
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>


<script setup>

import { onMounted, ref } from 'vue';


import axiosInstance from '../../js/axiosself';

import { ElTable, ElMessage } from 'element-plus';



const tableData = ref('');

const start = ref();
const destination = ref();
const time = ref();
onMounted(() => {
  Start();
});
const Start = () =>{
  axiosInstance.get(`/SelectOrder?start=${start.value}&destination=${destination.value}`).then(ref => {
    tableData.value = ref.data.data;
    console.info(ref.data.data)
  })
}

const defaultTime = ref(new Date());

const currentRow = ref()
const singleTableRef = ref()

const setCurrent = () => {//加入拼车，要判断是不是自己的订单


  const tt = new FormData;
  tt.append("id", currentRow.value);
  axiosInstance.post("/JoinOrder",
    tt
  ).then(res => {
    if (res.data.code == 1) {//如果拿到的结果通过，那么就弹窗，并且把订单号去掉

      let temp = tableData.value;

      tableData.value = temp.filter(obj => {
        console.info(obj.uuid)
        return obj.id !== currentRow.value;
      })

      ElMessage({
        message: '成功加入订单',
        type: 'success',
      })

      Start();

    } else {
      ElMessage.error(`加入失败,因为：${res.data.msg}`);
      Start();
    }
  }).catch(e => {
    console.info(e);
  })


}

const handleCurrentChange = (val) => {



  val = val ?? { uuid: 10 };//如果是空的，那么就直接

  currentRow.value = val.uuid;



}

const onSubmit = () => {
  axiosInstance.get(`/SelectOrder?start=${start.value}&destination=${destination.value}`).then(ref => {//这里反悔了所有的订单，在本地对此进行了筛选优化，而不是在后端进行
    tableData.value = ref.data.data.filter(obj => {//过滤器
      // console.info("时间" + obj.time);
      // console.info("当前时间" + (Date.now() - 8.6e7));
      // 循环遍历数组中的每个对象
      return obj.time >= Date.now() && obj.time <= time.value + 1000 * 60 * 60 * 24 && obj.time >= time.value - 1000 * 60 * 60 * 24; // 返回时间大于当前时间 的元素
    });
    // 循环遍历数组中的每个对象
    tableData.value.forEach(item => {
      // 将时间戳转换为日期对象
      const date = new Date(parseInt(item.time));



      // 获取年、月、日、时、分信息
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');

      // 拼接成 yyyy-mm-dd hh:mm 格式
      const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;

      // 添加新字段 time1，并将格式化后的时间存入其中
      item.time1 = formattedTime;
    });
    console.info(tableData.value)
  })
}







const options = [
  {
    value: '仙林大学城',
    label: '仙林大学城',
    children: [
      {
        value: '南京大学',
        label: '南京大学',

      },
      {
        value: '南京师范大学',
        label: '南京师范大学',
      },
      {
        value: '南京财经大学',
        label: '南京财经大学',
      },
      {
        value: '南京邮电大学',
        label: '南京邮电大学',
      },
      {
        value: '南京中医药大学',
        label: '南京中医药大学',
      },
      {
        value: '南京森林警察学院',
        label: '南京森林警察学院',
      },
      {
        value: '南京审计大学金审学院',
        label: '南京审计大学金审学院',
      },
      {
        value: '南京理工大学紫金学院',
        label: '南京理工大学紫金学院',
      },
      {
        value: '南京体育学院',
        label: '南京体育学院',
      },
      {
        value: '南京工业职业技术大学',
        label: '南京工业职业技术大学',
      },

    ],
  },
  {
    value: '江宁大学城',
    label: '江宁大学城',
    children: [
      {
        value: '东南大学',
        label: '东南大学',

      },
      {
        value: '河海大学',
        label: '河海大学',
      },
      {
        label: '中国药科大学',
        value: '中国药科大学',
      },
      {
        value: ' 南京传媒学院',
        label: ' 南京传媒学院',
      },
      {
        value: '南京医科大学',
        label: '南京医科大学',
      }, {
        value: ' 南京工程学院',
        label: ' 南京工程学院',
      },
      {
        value: '南京晓庄学院',
        label: '南京晓庄学院',
      },
      {
        value: '金陵科技学院',
        label: '金陵科技学院',
      },
      {
        value: '南京邮电大学',
        label: '南京邮电大学',
      },
      {
        value: '江苏海事职业技术学院',
        label: '江苏海事职业技术学院',
      },
      {
        value: '金陵协和神学院',
        label: '金陵协和神学院',
      },
      {
        value: '南京交通职业技术学院 ',
        label: '南京交通职业技术学院 ',
      },
      {
        value: '南京旅游职业学院',
        label: '南京旅游职业学院',
      },
      {
        value: '江苏经贸职业技术学院',
        label: '江苏经贸职业技术学院',
      },
      {
        value: '正德职业技术学院',
        label: '正德职业技术学院',
      },
      {
        value: '应天职业技术学院',
        label: '应天职业技术学院',
      },
    ],
  },
  {
    value: '江宁大学城',
    label: '江宁大学城',
    children: [
      {
        value: '南京信息工程大学',
        label: '南京信息工程大学',
      },
      {
        value: ' 南京工业大学',
        label: ' 南京工业大学',
      },
      {
        value: ' 南京审计大学南京农业大学',
        label: ' 南京审计大学南京农业大学',
      },
      {
        value: '南京农业大学',
        label: '南京农业大学',
      },
      {
        value: '江苏第二师范学院',
        label: '江苏第二师范学院',
      },
      {
        value: ' 南京铁道职业技术学院',
        label: ' 南京铁道职业技术学院',
      },
      {
        value: '江苏警官学院',
        label: '江苏警官学院',
      },
      {
        value: '南京大学金陵学院',
        label: '南京大学金陵学院',
      },
      {
        value: '东南大学成贤学院',
        label: '东南大学成贤学院',
      },

    ]

  },
  {
    value: '溧水大学城',
    label: '溧水大学城',
    children: [
      {
        value: '南京林业大学',
        label: '南京林业大学',
      },
      {
        value: '南京工业大学浦江学院',
        label: '南京工业大学浦江学院',
      },
      {
        value: ' 江苏第二师范学院',
        label: ' 江苏第二师范学院',
      },
      {
        value: '南京艺术学院',
        label: '南京艺术学院',
      },
      {
        value: '中国人民解放军陆军工程大学',
        label: '中国人民解放军陆军工程大学',
      },
      {
        value: '南京元博职业技术学院',
        label: '南京元博职业技术学院',
      },
      {
        value: '南京视觉艺术学院',
        label: '南京视觉艺术学院',
      },
      {
        value: '南京城市职业学院',
        label: '南京城市职业学院',
      },
      {
        value: '江苏传媒学院',
        label: '江苏传媒学院',
      },

    ]

  },
  {
    value: '风景区',
    label: '风景区',
    disabled: true,
    children: [


    ]

  },


]


const options1 = [

  {
    value: '高铁/火车 站',
    label: '高铁/火车 站',
    // disabled: true,
    children: [
      {
        value: '仙林站',
        label: '仙林站',
      },
      {
        value: '南京站',
        label: '南京站',
      },
      {
        value: '南京南站',
        label: '南京南站',
      },
      {
        value: '溧水站',
        label: '溧水站',
      },
      {
        value: '江宁站',
        label: '江宁站',
      },
      {
        value: '江宁西站',
        label: '江宁西站',
      },

    ]

  },
  {
    value: '巴士 站',
    label: '巴士 站',
    // disabled: true,
    children: [
      {
        value: '南京汽车客运站(小红山客运站)',
        label: '南京汽车客运站(小红山客运站)',
      },
      {
        value: '南京客运南站(南京汽车客运南站)',
        label: '南京客运南站(南京汽车客运南站)',
      },
      {
        value: '南京东站(南京长途汽车东站)',
        label: '南京东站(南京长途汽车东站)',
      },
      {
        value: '南京北站(南京长途汽车客运北站)',
        label: '南京北站(南京长途汽车客运北站)',
      },
      {
        value: '江宁客运站',
        label: '江宁客运站',
      },
      {
        value: '高淳站',
        label: '高淳站',
      },
      {
        value: '溧水站',
        label: '溧水站',
      },
      {
        value: '南京葛塘站',
        label: '南京葛塘站',
      },

    ]

  },
  {
    value: '景区',
    label: '景区',
    // disabled: true,
    children: [
      {
        value: '钟山风景区',
        label: '钟山风景区',
      },
      {
        value: '栖霞山风景区',
        label: '栖霞山风景区',
      },
      {
        value: '夫子庙·秦淮河·老门东',
        label: '夫子庙·秦淮河·老门东',
      },
      {
        value: '牛首山·佛顶宫',
        label: '牛首山·佛顶宫',
      },
      {
        value: '总统府·南京博物院',
        label: '总统府·南京博物院',
      },
      {
        value: '南京城墙中华门·玄武湖',
        label: '南京城墙中华门·玄武湖',
      },
      {
        value: '瞻园·愚园·古典园林',
        label: '瞻园·愚园·古典园林',
      },
      {
        value: '南京寺庙',
        label: '南京寺庙',
      },
      {
        value: '汤山温泉·江苏园博园·汤山欢乐水世界',
        label: '汤山温泉·江苏园博园·汤山欢乐水世界',
      },
      {
        value: '阅江楼·狮子山',
        label: '阅江楼·狮子山',
      },
    ]

  },
  {
    value: '美食街',
    label: '美食街',
    disabled: true,
    children: [
      {
        value: '',
        label: '',
      },
    ]
  },
  {
    value: '市区',
    label: '市区',
    disabled: true,
    children: []

  },
]


const disabledDateFn = (time) => {
  if (time.getTime() < Date.now() - 8.64e7 + 1000 * 60 * 60 * 24) {
    return true;
  } else {
    return false;
  }
}


</script>